<template>
  <div class="tabbar">
    <span :class="{active:tabbarindex == index}" v-for="(item,index) in tabbarlist" :key="index" @click="handleClick(index)">
        {{item}}
    </span>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tabbarindex:0,
            tabbarlist:['首页','爆爆团','订单','我的']
        }
    },
    methods:{
        handleClick(index){
            this.tabbarindex=index
            this.$emit('clickTabbar',index)
            
        }
    },
    
}
</script>

<style scoped>
.tabbar{
    width: 100%;
    height: 50px;
    border-top: 1px solid gainsboro;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* background-color: red; */
}
span{
    cursor: pointer;
}
.active{
    color: rgb(5, 148, 237);
}
</style>